<template>
  <view class="space-container">
    <view class="category-tabs-scroll">
      <view class="category-tabs">
        <view
          v-for="cat in categories"
          :key="cat.name"
          :class="['tab', { active: cat.name === activeCategory }]"
          @click="activeCategory = cat.name"
        >
          {{ cat.name }} <span class="count">{{ cat.count }}</span>
        </view>
      </view>
    </view>
    <view class="goods-list-scroll">
      <view class="goods-list">
        <view class="goods-card" v-for="item in filteredGoods" :key="item.name">
          <img :src="item.img" class="goods-img" />
          <view class="goods-title">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="enter-space">
      <button>进入空间</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const categories = [
  { name: '厨房', count: 9 },
  { name: '客厅', count: 9 },
  { name: '主卧', count: 14 },
  { name: '书房', count: 27 },
  { name: '阳台', count: 5 },
]

const goods = [
  {
    name: '榨汁机',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '小米收纳盒',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '汤锅',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料架',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  {
    name: '调料',
    img: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1667112472.92265090.jpg',
    category: '厨房',
  },
  // ... 其他商品
]

const activeCategory = ref(categories[0].name)

const filteredGoods = computed(() => goods.filter((item) => item.category === activeCategory.value))
</script>

<style lang="scss" scoped>
.space-container {
  border-radius: 24rpx;
}
.category-tabs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 32rpx;
  scrollbar-width: none; /* Firefox */
}
.category-tabs-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}
.category-tabs {
  display: flex;
  gap: 26rpx;
  min-width: max-content;
}
.tab {
  padding: 12rpx 16rpx;
  border-radius: 16rpx;
  background: #f2f3f5;
  color: #666;
  font-size: 26rpx;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.tab.active {
  background: #2979ff;
  color: #fff;
}
.count {
  font-size: 26rpx;
  margin-left: 4rpx;
}
.goods-list-scroll {
  max-height: 960rpx; /* 可根据需要调整高度 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.goods-list-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}
.goods-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx;
}

.goods-card {
  width: calc((100% - 48rpx) / 3); /* 3列，2个gap */
  background: #f8f8f8;
  border-radius: 22rpx;
  text-align: start;
  box-shadow: 0 4rpx 16rpx #0001;
  /* margin-bottom: 24rpx; */
}
.goods-img {
  width: 100%;
  height: 164rpx;
  object-fit: cover;
  border-radius: 16rpx;
}
.goods-title {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  line-height: 26rpx;
  letter-spacing: -0.05px;
  padding: 16rpx;
}

.enter-space {
  margin: 0 auto;
  width: 678rpx;
  height: 94rpx;
  display: flex;
  position: absolute;
  right: 38rpx;
  bottom: -388rpx;
  /* 毛玻璃效果 */
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx #0001;
  button {
    width: 160rpx;
    height: 56rpx;
    line-height: 56rpx;
    border-radius: 28rpx;
    font-size: 24rpx;
    border-width: 1px;
    margin-top: 18rpx;
    border-color: #025eff;
    border-style: solid;
    color: #025eff;
    background-color: #ee070700;
  }
}
</style>
